<template>
  <view class="file">
    <view class="btns">
      <view
        class="btn out"
        :class="{ active: active === 0 }"
        @click="toggleActive(0)"
      >
        借出
      </view>
      <view
        class="btn in"
        :class="{ active: active === 1 }"
        @click="toggleActive(1)"
      >
        借款
      </view>
    </view>
    <view class="list out" v-if="active === 0">
      <view v-if="outList.length > 0">
        <view class="item" v-for="item in outList" :key="item.id">
          <view class="item-header">
            <view class="left-content">
              <view class="left"></view>
              <view class="txt">个人借条</view>
              <view class="time">
                <view class="key"> {{ item.stateTitle }} </view>
              </view>
            </view>
            <view class="right">
              <view class="txt">去查看</view>
              <view class="icon"></view>
            </view>
          </view>
          <view class="item-content">
            <view class="left">
              <view class="left-item">
                <view class="key">借款人:</view>
                <view class="value">{{ item.name }}</view>
              </view>
              <view class="left-item">
                <view class="key">借款期限:</view>
                <view class="value"
                  >{{ item.beginDate }} - {{ item.endDate }}</view
                >
              </view>
              <view class="left-item">
                <view class="key">还款方式:</view>
                <view class="value">{{ item.type }}</view>
              </view>
            </view>
            <view class="right">
              <view class="sums">￥{{ item.sum }}</view>
              <view class="use">{{ item.use }}</view>
            </view>
          </view>
          <img
            src="../../static/images/file/wait.png"
            alt=""
            class="state-wait"
            v-if="item.stateBg === 'wait'"
          />
          <img
            src="../../static/images/file/end.png"
            class="state-end"
            alt=""
            v-if="item.stateBg === 'end'"
          />
          <img
            src="../../static/images/file/normal.png"
            class="state-normal"
            alt=""
            v-if="item.stateBg === 'normal'"
          />
          <img
            src="../../static/images/file/abolished.png"
            class="state-abolished"
            alt=""
            v-if="item.stateBg === 'abolished'"
          />
        </view>
      </view>
      <u-empty text="暂无数据" mode="list" margin-top="200" v-else></u-empty>
    </view>
    <view class="list in" v-if="active === 1">
      <view v-if="inList.length > 0">
        <view class="item" v-for="item in inList" :key="item.id">
          <view class="item-header">
            <view class="left-content">
              <view class="left"></view>
              <view class="txt">个人借条</view>
              <view class="time">
                <view class="key"> {{ item.stateTitle }} </view>
              </view>
            </view>
            <view class="right">
              <view class="txt">去查看</view>
              <view class="icon"></view>
            </view>
          </view>
          <view class="item-content">
            <view class="left">
              <view class="left-item">
                <view class="key">借款人:</view>
                <view class="value">{{ item.name }}</view>
              </view>
              <view class="left-item">
                <view class="key">借款期限:</view>
                <view class="value"
                  >{{ item.beginDate }} - {{ item.endDate }}</view
                >
              </view>
              <view class="left-item">
                <view class="key">还款方式:</view>
                <view class="value">{{ item.type }}</view>
              </view>
            </view>
            <view class="right">
              <view class="sums">￥{{ item.sum }}</view>
              <view class="use">{{ item.use }}</view>
            </view>
          </view>
          <img
            src="../../static/images/file/wait.png"
            alt=""
            class="state-wait"
            v-if="item.stateBg === 'wait'"
          />
          <img
            src="../../static/images/file/end.png"
            class="state-end"
            alt=""
            v-if="item.stateBg === 'end'"
          />
          <img
            src="../../static/images/file/normal.png"
            class="state-normal"
            alt=""
            v-if="item.stateBg === 'normal'"
          />
          <img
            src="../../static/images/file/abolished.png"
            class="state-abolished"
            alt=""
            v-if="item.stateBg === 'abolished'"
          />
        </view>
      </view>
      <u-empty text="暂无数据" mode="list" margin-top="200" v-else></u-empty>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      outList: [],
      inList: []
    }
  },
  onLoad() {
    this.getOutList()
  },

  methods: {
    // 切换列表数据
    toggleActive(val) {
      // 判断是否为当前点击, 如果是不执行操作，否则查询列表
      if (val === this.active) return
      this.active = val
      if (val === 1) {
        this.getInList()
      } else {
        this.getOutList()
      }
    },

    getOutList() {
      this.outList = [
        {
          id: 1,
          name: '待对方补齐',
          beginDate: '2024.03.14',
          endDate: '2025.03.14 ',
          sum: '1000.00',
          use: '经营周转',
          type: '一次性还本付息',
          stateTitle: '剩余处理时间 : 27天20时42分',
          stateBg: 'wait'
        },
        {
          id: 2,
          name: '张三',
          beginDate: '2024.03.14',
          endDate: '2025.03.14 ',
          sum: '1000.00',
          use: '经营周转',
          type: '一次性还本付息',
          stateTitle: '已完成签订',
          stateBg: 'end'
        },
        {
          id: 3,
          name: '张三',
          beginDate: '2024.03.14',
          endDate: '2025.03.14 ',
          sum: '1000.00',
          use: '经营周转',
          type: '一次性还本付息',
          stateTitle: '已完成签订',
          stateBg: 'normal'
        }
      ]
    },
    getInList() {
      this.inList = [
        {
          id: 1,
          name: '张三',
          beginDate: '2024.03.14',
          endDate: '2025.03.14 ',
          sum: '1000.00',
          use: '经营周转',
          type: '一次性还本付息',
          stateTitle: '剩余处理时间 : 27天20时42分',
          stateBg: 'wait'
        },
        {
          id: 2,
          name: '张三',
          beginDate: '2024.03.14',
          endDate: '2025.03.14 ',
          sum: '1000.00',
          use: '经营周转',
          type: '一次性还本付息',
          stateTitle: '已完成签订',
          stateBg: 'abolished'
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
@function rpx($num) {
  @return $num + rpx;
}
page {
  background-color: #fafafa;
}
.btns {
  display: flex;
  padding: rpx(40) rpx(192);
  .btn {
    width: rpx(195);
    height: rpx(67);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: rpx(6);
    background: #e5e5e5;
    margin: 0 rpx(5);
    &.out.active {
      background-color: #ff8d1a;
      color: #fff;
    }
    &.in.active {
      background-color: #2a82e4;
      color: #fff;
    }
  }
}

.list {
  width: rpx(734);
  margin: 0 auto;

  .item {
    margin: rpx(20) 0;
    position: relative;
    .item-header {
      height: rpx(45);
      border-radius: rpx(6);
      background: linear-gradient(90deg, #ffffffff 0%, #ffe2c4ff 100%);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-left: rpx(4);
      padding-right: rpx(14);
      .left-content {
        display: flex;
        color: #a6a6a6;
        font-size: rpx(24);
        display: flex;
        align-items: center;
        .left {
          width: rpx(8);
          height: rpx(24);
          background: #ff8d1aff;
        }

        .txt {
          padding-left: rpx(30);
        }

        .time {
          display: flex;
          align-items: center;

          .value {
            padding-left: rpx(10);
          }
        }
      }

      .right {
        display: flex;
        align-items: center;
        .txt {
          color: #ff8d1a;
        }

        .icon {
          width: rpx(10);
          height: rpx(17);
          display: block;
          background: url('../../static/images/file/arrow-right.png') no-repeat;
          background-size: 100% 100%;
          margin-left: rpx(13);
        }
      }
    }
    .item-content {
      display: flex;
      justify-content: space-between;
      padding: rpx(25) rpx(15);
      background-color: #fff;

      .left {
        .left-item {
          display: flex;
          align-items: center;
          font-size: rpx(24);
          padding: rpx(10) 0;

          .key {
            width: rpx(120);
          }
        }
      }

      .right {
        padding-right: rpx(10);
        .sums {
          font-weight: 700;
          font-size: rpx(30);
          padding: rpx(20) 0;
        }

        .use {
          color: #a6a6a6;
          text-align: right;
        }
      }
    }
    .state-wait {
      position: absolute;
      width: rpx(240);
      height: rpx(178);
      top: rpx(40);
      right: rpx(130);
    }
    .state-end {
      position: absolute;
      width: rpx(306);
      height: rpx(248);
      top: rpx(0);
      right: rpx(100);
    }
    .state-normal {
      position: absolute;
      width: rpx(306);
      height: rpx(248);
      top: rpx(0);
      right: rpx(80);
    }
    .state-abolished {
      position: absolute;
      width: rpx(306);
      height: rpx(248);
      top: rpx(0);
      right: rpx(80);
    }
  }
  &.in {
    .item {
      .item-header {
        background: linear-gradient(90deg, #ffffff 0%, #afd2fa 100%);
        .left-content {
          .left {
            background: #2a82e4;
          }
        }
        .right {
          .txt {
            color: #2a82e4;
          }
          .icon {
            background: url('../../static/images/file/arrow-right-in.png')
              no-repeat;
            background-size: 100% 100%;
          }
        }
      }
    }
  }
}
</style>
